<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>汤山社会治理数据采集系统</title>
	<link rel="stylesheet" type="text/css" href="css/video.css" />
	<link rel="stylesheet" type="text/css" href="css/example.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/weui.min.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/element-ui.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/vant.min.css" />
	<link rel="stylesheet" type="text/css" href="css/public.css?v=5.1" />
	<link rel="stylesheet" type="text/css" href="css/index.css?v=13.0" />
	<link rel="stylesheet" type="text/css" href="css/placeDetail.css?v=4.0" />
	<link rel="stylesheet" type="text/css" href="css/monitor.css?v=1.0.6" />
	<style>
		#ub-jsk_iframe {
			width: 100%;
			height: auto;
			min-height: 300px;
		}

		#easyplayer {
			width: 100%;
			min-height: 300px;
		}
	</style>
</head>

<body>
	<div id="main" style="position: relative;" v-cloak>
		<!-- 头部搜索框 -->
		<div class="ub-search">
			<input v-model.trim="monitorFrom.keywords" type="text" placeholder="请输入您的搜索内容" ref="inputRef"
				@input="input">
			<img src="images/placeSearch.png">
			<a class="weui-btn weui-btn_primary" @click="inputBtn">搜索</a>
		</div>
		<!-- 地图，goCurrent跳转到当前位置 -->
		<div class="ub-height" id="ub-drow">
			<!-- <div @click="goCurrent()"
				style="position: absolute;right: 10px;bottom: 10px;z-index: 2;width: 40px;height: 40px;background: #fff;display: flex;align-items: center;justify-content: center;border-radius: 8px;">
				<img style="width: 20px;" src="images/center.png">
			</div> -->
			<div class="container">
				<div id="container"></div>
			</div>
		</div>
		<!-- 行业，网格切换。数据展示 -->
		<div class="ub-list">
			<div>
				<div class="ub-listTitle">
					<div v-cloak class="ub-listActive">
						社区( {{monitorCommunityList.length}} )
						<div class="ub-line"></div>
					</div>
					<div class="ub-onPull">
						<img v-cloak @click="downHeight" :style="isDown == false?'transform: rotateX(180deg)':''"
							src="images/onPull.png">
					</div>
				</div>
				<div v-cloak style="margin: 5px 0 8px 20px;color: #888888;">监控总数:
					&nbsp;<span style="color: #FF5000;">{{monitorTotal}}</span>
				</div>
			</div>
			<div v-cloak class="ub-listContent2">
				<div v-for="item in monitorCommunityList" class="ub-communityContent">
					<div class="ub-community" :style="item.flag1?'background: #dcdcdc;border-radius:4px':''">
						<div @click="communityBtn(item)">
							<img src="images/listIcon15.png" alt="">
							<div v-cloak>
								<p v-cloak>{{item.name}}</p>
								<div v-cloak>{{item.monitoring_num}}</div>
							</div>
						</div>
						<div @click="unwindBtn(item.id)" class="ub-lookBth">{{item.flag?'收起':'查看'}}</div>
					</div>

					<div v-for="(type,typeIndex) in item.category" :key="type.category_id">
						<div class="ub-grid">
							<div class="ub-gridContent" style="position:relative" v-show="item.flag ">
								<div style="padding-right: 90px;">
									<p style="width: 80%;">{{type.name}}</p>
									<div>{{type.monitoring_num}}</div>
								</div>
								<div class="ub-ll_button" @click="unwindBtnMonitorType(item,type)">
									{{type.flag?'收起':'查看'}}</div>
							</div>
						</div>

						<div class="ub-grid" v-show="type.flag">
							<div @click="handleMonitorMarker(item1.point_id)" v-for="(item1,index) in type.list"
								:key="item1.point_id" class="ub-gridContent">
								<div>
									<p style="width: 100%;">{{item1.name}}</p>
								</div>
								<img src="images/listRight.png">
							</div>
							<div @click="type.flag = !type.flag" class="ub-packUp">
								<img src="images/packUp.png">
							</div>
						</div>
					</div>

					<div class="ub-grid" v-show="item.flag">
						<div @click="handleMonitorMarker(item1.point_id)" v-for="(item1,index) in item.list"
							:key="item1.point_id" class="ub-gridContent">
							<div v-cloak>
								<p v-cloak>{{item1.name}}</p>
							</div>
							<img src="images/listRight.png">
						</div>
						<div @click="item.flag = !item.flag" class="ub-packUp">
							<img src="images/packUp.png">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 右侧列表，全部，九小按钮 -->
		<div class="ub-btnLayout">
			<!-- <div v-cloak
				v-show="mapObj.keywords || mapObj.cate_id || mapObj.dept_id || placeObj.cate_id || placeObj.dept_id"
				class="ub-listbtn" @click="ListBtn(1)" :style="isModal?'z-index:1000':''">
				<img src="images/indexList.png">
				<p>列表</p>
			</div> -->
			<div @click="allBtn(2)" class="ub-allBtn">
				<img src="images/indexAll.png">
				<p>全部</p>
			</div>
			<div @click="goIndex" class="ub-place-nine">
				<img src="images/place-9.png">
				<p>标签</p>
			</div>
			<!-- <div class="ub-place-monitor" @click="goMonitor">
				<img src="images/place-9.png">
				<p>监控</p>
			</div> -->
		</div>
		<!-- 右侧按钮点击，弹窗 -->
		<!-- 点击列表显示的框或搜索显示的框 -->
		<!-- <div v-cloak class="ub-indexListModal" v-show="isModal" @click="isModal = false"></div>
		<div v-cloak class="ub-indexListModal-content" id="ub-scroll" v-show="isModal">
			<div v-if="mapObj.keywords" v-cloak class="ub-modal-content" style="padding-top: 10px;">
				<div style="text-align: center;" v-cloak v-if="communityList.length == 0 && mapObj.keywords">
					<p style="text-align: left;">你搜索的 <span style="color: #930000;">"{{mapObj.keywords}}"</span> 的结果
					</p>
					<div>
						<img style="width: 60%;" src="images/noData.png">
						<p style="text-align: center;color: #8c8c8c;">暂无数据</p>
					</div>
				</div>
				<div v-cloak v-if="communityList.length > 0 && mapObj.keywords">你搜索的 <span
						style="color: #930000;">"{{mapObj.keywords}}"</span> 的结果</div>
				<div class="ub-sonCommunity" @click="getSonPlace(item.dept_id,index)"
					v-for="(item,index) in communityList" :key="item.id">
					<div class="ub-sonCommun"
						:style="item.flag?'position: sticky;top: 0;background: #dcdcdc;border-radius:4px':''">
						<div class="ub-sonCommun-content">
							<img src="images/listIcon15.png">
							<p>{{item.name}}</p>
							<span>({{item.count}})</span>
						</div>
						<div class="ub-JT">
							<img v-if="item.flag == false" style="width: 15px;height: 15px;" src="images/rightJT.png">
							<img v-else style="width: 15px;height: 15px;" src="images/downJT.png">
						</div>
					</div>
					<div v-show="item.flag" class="ub-modal-content1">
						<div @click="getPointDetail(item1.id)" v-for="item1 in sonPlaceList" :key="item1.id">
							<img src="images/placeLocation.png">
							<p>{{item1.place_name}}</p>
						</div>
					</div>
				</div>
			</div>
			<div v-else v-cloak class="ub-modal-content">
				<div v-if="listActive == 1" class="ub-sonCommunity" v-for="(item,index) in communityList"
					:key="item.id">
					<div class="ub-sonCommun">
						<div class="ub-sonCommun-content">
							<img src="images/listIcon15.png">
							<p>{{item.name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
				</div>
				<div v-if="listActive == 2" class="ub-sonCommunity" v-for="(item,index) in categoryData" :key="item.id">
					<div class="ub-sonCommun">
						<div class="ub-sonCommun-content">
							<img :src="item.cate_icon">
							<p>{{item.cate_name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
				</div>
			</div>
		</div> -->
		<!-- 点击九小显示的框 -->
		<!-- <div v-cloak class="ub-indexListModal" v-show="isPlace9" @click="isPlace9 = false"></div>
		<div v-cloak class="ub-indexListModal-content" id="ub-scroll" v-show="isPlace9">
			<div v-cloak class="ub-modal-content">
				<div class="ub-isPlace9">
					<div>
						<p>标签详情</p>
						<div class="ub-isPlace9-line"></div>
					</div>
				</div>
				<div class="ub-sonCommunity" v-for="(item,index) in categoryListData" :key="item.id"
					@click="handleSearchTag(item.tag,item.tag_name,1)">
					<div class="ub-sonCommun" style="width: 90%;">
						<div class="ub-sonCommun-content">
							<img src="images/listIcon15.png">
							<p>{{item.tag_name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
				</div>
			</div>
		</div> -->
		<!-- 显示监控，弹窗 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show="isShowVideo">
			<div v-show="isLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-video1" v-show="isShowVideo">
			<div class="my-player" id="video1">
				<video id="my-player" style="width: 100%;" preload="auto" muted autoplay controls
					style="border: 1px solid red;" webkit-playsinline="true" playsinline="true" v-show="!isVcp">
					<source src="">
				</video>
				<div id="my-player1" class="ub-video"></div>
			</div>
		</div>
		<div class="ub-cloce" v-show="isShowVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>

		<!-- 显示天翼监控 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show=" isShowTYVideo">
			<div v-show="isShowTYVideoLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-sty" v-show="isShowTYVideo && !isShowTYVideoLoading" style="display: none;" v-cloak>
			<iframe id="TYplayer" :src="TYUrl" allowfullscreen marginwidth=0 marginheight=0 onerror="error">
			</iframe>
		</div>
		<div class="ub-cloce" v-show="isShowTYVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>
		<!-- 搜索无数据提示框 -->
		<!-- <el-dialog v-cloak :title="mapObj.keywords" :visible.sync="isKeywords" width="95%" style="border-radius: 8px;"
			:show-close="false" center>
			<div style="text-align: center;">暂无数据</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" style="width: 50%" @click="isKeywords = false">确 定</el-button>
			</span>
		</el-dialog> -->
		<!-- 底部栏 -->
		<div class="ub-footerNav">
			<div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
				<a href="index.html" id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips"
					aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
					<div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon1-selected.png" alt="" class="weui-tabbar__icon">
					</div>
					<p id="t1_title" aria-hidden="true" class="weui-tabbar__label">地图查看</p>
				</a>
				<a href="listLook.html?type=monitor" id="tab2" role="tab" aria-labelledby="t2_title"
					aria-selected="false" aria-controls="panel2" class="weui-tabbar__item">
					<img src="images/navIcon3.png" alt="" class="weui-tabbar__icon">
					<p aria-hidden="true" id="t2_title" class="weui-tabbar__label">列表查看</p>
				</a>
				<a href="personalCenter.html" id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips"
					aria-selected="false" aria-controls="panel3" class="weui-tabbar__item">
					<div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon2.png" alt="" class="weui-tabbar__icon">
					</div>
					<p id="t3_title" aria-hidden="true" class="weui-tabbar__label">个人中心</p>
				</a>
			</div>
		</div>
	</div>
	<!-- <script>
			window._AMapSecurityConfig = {
				securityJsCode: "938130475c2bd4cb71d78257a3db284c" // 开发环境使用
			}
		</script> -->
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js"></script> -->


	<script src="js/cHttp.js?v=1.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/hls.js" type="text/javascript" charset="utf-8"></script>

	<!-- <script src="js/video-contrib.js" type="text/javascript" charset="utf-8"></script> -->

	<script src="js/videoJs.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ckplayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="h5Player/h5player.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wxPublic.js?v=12.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/g-tConversion.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/t-gConversion.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://vcp.21cn.com/metaplayer/static/template/latest/lib/mpIframe-min.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="/js/EasyWasmPlayer.js"></script>
	<script src="js/gdApi.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js"></script>
	<script>
		new VConsole()
	</script> -->
	<script src="js/monitor.js?v=1.0.123" type="text/javascript" charset="utf-8"></script>
</body>


</html>